<template>
  <component v-bind="$attrs" :is="tabs[props.fqn]" @success="handleSuccess" />
</template>

<script lang="ts" setup>
  import { watch, ref } from 'vue';
  import ChartModal from './modalClassify/chartModal/ChartModal.vue';
  import AlarmTableModel from './modalClassify/alarmTable/AlarmTableModel.vue';
  import LatestCardModal from './modalClassify/latestCard/LatestCardModal.vue';
  import ControlCardModal from './modalClassify/controlCard/ControlCardModal.vue';
  import HtmlCardModal from './modalClassify/htmlCard/HtmlCardModal.vue';
  import TableModel from '/@/components/thingsborad/sharedComponents/modules/widgetsComponents/table/components/TableModel.vue';
  const tabs = {
    'charts.basic_timeseries': ChartModal,
    'cards.attributes_card': LatestCardModal,
    'gpio_widgets.basic_gpio_control': ControlCardModal,
    'alarm_widgets.alarms_table': AlarmTableModel,
    'cards.html_card': HtmlCardModal,
  };
  const emits = defineEmits(['success']);
  const props = defineProps({
    fqn: {
      type: String,
      default: '',
    },
    randomId: {
      type: String,
      default: '',
    },
  });

  const randomId = ref<string>();

  watch(
    () => props.randomId,
    (newVal) => (randomId.value = newVal),
  );
  watch(
    () => props.fqn,
    (val) => {
      console.log(val, 'val');
    },
  );

  const handleSuccess = (value: Recordable) => {
    emits('success', randomId.value, value);
  };
</script>
